import React, { Fragment, memo, Suspense } from 'react'
import { useRoutes } from 'react-router-dom';

import AppHeader from './components/app-header';
import AppFooter from './components/app-footer';
import AppPlayerBar from './page/player/app-player-bar';

import routes from './router';



const App = memo(() => {
  const element = useRoutes(routes)
  return (
    <Fragment>
      <AppHeader />
      <Suspense fallback={<div>page loading</div>}>
        {element}
      </Suspense>
      <AppFooter />
      <AppPlayerBar />
    </Fragment>
  )
})

export default App